<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Home123</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Home</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="log">
        <pre>
          <p>{{log}}</p>
        </pre>
        <div v-if="errMess.length > 0">
          <p>{{ errMess }}</p>
        </div>
      </div>

      <div id="items">
        <h2>Items</h2>
        <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.name }} {{ item.phoneNumber }}
          </li>
        </ul>
      </div>

      <div id="users">
        <h2>Users</h2>
        <ul>
          <li v-for="user in users" :key="user.id">
            {{ user.firstName }} {{ user.lastName }}
            <ul>
              <li v-for="item in user.items" :key="item.id">
                {{ item.name }} {{ item.phoneNumber }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <img id="image1" src="" />
      <img id="image2" src="" />
      <!-- 
      <ion-item>
      </ion-item>
      <ion-item>
      </ion-item> -->
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import { defineComponent, onBeforeMount, getCurrentInstance } from "vue";
import { Item } from "@/entity/item";
import { User } from "@/entity/user";
import { useState } from "@/composables/state";
import UserDataSource from "@/data-sources/UserDataSource";
import axios from "axios";
import { Buffer } from "buffer";
function readImage(blob: Uint8Array, type: "png" | "jpeg" = "png") {
  const arr = new Uint8Array(blob);
  const myBlob = new Blob([arr], { type });
  const imageUrl: string = URL.createObjectURL(myBlob);
  return imageUrl;
}
export default defineComponent({
  name: "HomeView",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },
  setup() {
    const app = getCurrentInstance();
    const [log, setLog] = useState("");
    const [items, setItems] = useState([]);
    const [users, setUsers] = useState([]);

    let errMess = "";
    if (app != null) {
      const platform = app.appContext.config.globalProperties.$platform;
      const sqlite = app.appContext.config.globalProperties.$sqlite;

      onBeforeMount(async () => {
        setLog(log.value.concat("\n* Start testing *\n"));
        try {
          const connection = UserDataSource;
          const database = connection.options.database;
          const userRepository = connection.getRepository(User);
          const itemRepository = connection.getRepository(Item);
          const test = async () => {
            await userRepository.find().then((res) => console.log("res", res));
            // fetch-TEST
            const fetchImgBlob = await fetch("assets/icon/1-1.jpg");
            const imageBuffer = Buffer.from(
              new Uint8Array(await (await fetchImgBlob.blob()).arrayBuffer())
            );
            const blob1 = new User();
            blob1.firstName = "blob-fetch345";
            blob1.lastName = "assets";
            blob1.email = "fetch.assets.ashe@example.com2";
            blob1.header = Buffer.from(imageBuffer);
            const fetchres = await userRepository.save(blob1);
            const image1EL: HTMLImageElement =
              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
              document.querySelector("#image1")!;
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            const fetchres2 = await userRepository.findOneBy({
              id: fetchres.id,
            });
            image1EL.src = readImage(fetchres2!.header!, "jpeg");

            await axios
              .get(
                "https://showsda-common-dev.oss-cn-shanghai.aliyuncs.com/image/3262654151262.png",
                { responseType: "arraybuffer" }
              )
              .then(async (res) => {
                console.log("axios-res", res, typeof res.data);
                const blob = new User();
                blob.firstName = "axios2";
                blob.lastName = "url";
                blob.email = "axios.ashe@example.com2";
                blob.header = Buffer.from(res.data);
                // blob.header = res.data;
                try {
                  const saveres = await userRepository.save(blob);
                  const saveres2 = await userRepository.findOneBy({
                    id: saveres.id,
                  });

                  console.log("saveres", saveres);
                  const image2EL: HTMLImageElement =
                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                    document.querySelector("#image2")!;
                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                  image2EL.src = readImage(saveres2!.header!);
                } catch (error) {
                  console.log("error", error);
                  setLog(log.value.concat(`\n* ${error} *\n`));
                }
              });
          };
          // create a user
          await test();
          const user = new User();
          user.firstName = "Arthur2";
          user.lastName = "Ashe";
          user.email = "arthur.ashe@example.com2";

          const u = new User();
          u.firstName = "uuArthur";
          u.lastName = "uuAshe";
          u.email = "uuarthur.ashe@example.com3";
          try {
            await userRepository.save(user);
            await userRepository.save(u);
          } catch (error) {
            console.log("error", error);
          }
          console.log("userRepository", userRepository);

          let userToUpdate = await userRepository.findOne({
            where: {
              email: user.email,
            },
          });
          const allUser = await userRepository.find();
          console.log("userToUpdate", userToUpdate, allUser);

          console.log(`$$$$ userToUpdate : ${JSON.stringify(userToUpdate)}`);
          if (userToUpdate != null) {
            // user.id = userToUpdate.id;
            userToUpdate.firstName = "Arthur1111";
            console.log("userToUpdate11", userToUpdate);
          }
          await userRepository.save(userToUpdate!);
          await userRepository.remove(u);
          const allUser2 = await userRepository.find();

          console.log("userToUpdate", userToUpdate, allUser2);

          // create a second user was added later to test live-reload
          const user1 = new User();
          user1.firstName = "Dan";
          user1.lastName = "Jeep";
          user1.email = "dan.jeep@example.com";
          userToUpdate = await userRepository.findOne({
            where: {
              email: user1.email,
            },
          });
          console.log(`$$$$ userToUpdate : ${JSON.stringify(userToUpdate)}`);
          if (userToUpdate != null) {
            user1.id = userToUpdate.id;
          }
          await userRepository.save(user1);
          /*		await connection.manager.find(User)
				
						.save(user)
						.then(user => {
							setLog(log.value.concat(`User has been saved. User id: ${user.id}\n`));
							console.log("User has been saved. User id is", user.id);
						})
						.catch(err => {
							console.log(`Error User ${err.message}`);
						});
*/
          /*					.insert(user)
					.into(Tokens)
					.values(post2)
					.onConflict(`("userId") DO UPDATE SET UUID = :uuid`)
					.setParameter("title", values.uuid)
					.execute();
*/
          // create items
          const item1 = new Item();
          item1.name = "Iphone 12 Pro Max";
          item1.phoneNumber = 123456789;
          item1.user = user;
          const item2 = new Item();
          item2.name = "Galaxy S21";
          item2.phoneNumber = 132456789;
          item2.user = user;
          let itemToUpdate = await itemRepository.findOne({
            where: {
              phoneNumber: item1.phoneNumber,
            },
          });
          console.log(`$$$$ itemToUpdate : ${JSON.stringify(itemToUpdate)}`);
          if (itemToUpdate != null) {
            item1.id = itemToUpdate.id;
          }
          await itemRepository.save(item1);
          itemToUpdate = await itemRepository.findOne({
            where: {
              phoneNumber: item2.phoneNumber,
            },
          });
          console.log(`$$$$ itemToUpdate : ${JSON.stringify(itemToUpdate)}`);
          if (itemToUpdate != null) {
            item2.id = itemToUpdate.id;
          }
          await itemRepository.save(item2);
          // added later to test live-reload
          const item3 = new Item();
          item3.name = "Note 3";
          item3.phoneNumber = 732456189;
          item3.user = user1;
          itemToUpdate = await itemRepository.findOne({
            where: {
              phoneNumber: item3.phoneNumber,
            },
          });
          console.log(`$$$$ itemToUpdate : ${JSON.stringify(itemToUpdate)}`);
          if (itemToUpdate != null) {
            item3.id = itemToUpdate.id;
          }
          await itemRepository.save(item3);
          /*
				await connection.manager
						.save(item1)
						.then(item1 => {
							setLog(log.value.concat(`Item1 has been saved. Item id: ${item1.id}\n`));
							console.log("Item has been saved. Item id is", item1.id);
						})
						.catch(err => {
							console.log(`Error Item ${err.message}`);
						});
				await connection.manager
						.save(item2)
						.then(item => {
							setLog(log.value.concat(`Item2 has been saved. Item id: ${item.id}\n`));
							console.log("Item has been saved. Item id is", item.id);
						});
*/
          if (platform === "web") {
            await sqlite.saveToStore(database);
          }
          const savedItems = await connection.manager.find(Item);
          setLog(log.value.concat(`Saved items from the db successful\n`));
          console.log("$$$ Saved items from the db: ", savedItems);
          setItems(savedItems);
          const loadedUsers = await connection
            .createQueryBuilder(User, "user")
            // .innerJoinAndSelect("user.items", "item")
            // .orderBy("user.lastName,item.name")
            .getMany();
          setLog(log.value.concat(`Saved users from the db successful \n`));
          console.log("$$$ Saved users from the db: ", loadedUsers);
          setUsers(loadedUsers);
        } catch (e) {
          console.log((e as any).message);
          errMess = `Error: ${(e as any).message}`;
          setLog(log.value.concat(`\n* ${errMess} *\n`));
        }
      });
    } else {
      errMess = `Error: app is null or undefined`;
    }
    return { log, items, users, errMess };
  },
});
</script>
